
.video {
	&-osd {
		opacity: 0;
		transition: opacity 0.1s linear;
		width: 100vw;
		cursor: none;
		&-name {
			display: flex;
			flex-direction: column;
			margin-left: 1.2em;
			&-logo {
				width: 16em;
				max-height: 6em;
				object-fit: contain;
				object-position: left top;
				filter: drop-shadow(0 0 10px black);
			}
			gap: 0.5em;
		}
	}
	&-osd-visible {
		cursor: default;
	}
	&-player-container {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		right: 0;
		bottom: 0;
		overflow: hidden;
	}
}

video {
	&::-webkit-media-text-track-display {
		overflow: visible !important;
	}
	&::cue {
		text-shadow: 0 2px 10px rgb(0 0 0 / 0.8);
		background: transparent;
	}
	&::cue(i) {
		text-shadow: 0 2px 10px rgb(0 0 0 / 0.8);
	}
}

.video-player {
	background: black;
	position: absolute;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	&-osd{
		position: absolute;
		width: 100vw;
		height: 100vh;
		top: 0;
		left: 0;
		cursor: none;
		display: flex;
		flex-direction: column;
		align-self: stretch;
		justify-content: space-between;
		padding: 1em 2em;
		background: linear-gradient(to top, rgb(0 0 0 / 0.7) 5vh, transparent 26vh 90vh, rgb(0 0 0 / 0.7));
		&.hovering{
			cursor: default;
		}
		&-controls{
			&-progress{
				display: flex;
				flex-direction: column;
				gap: 0.2em;
				align-items: stretch;
				justify-content: center;
				&-text{
					display: flex;
					align-items: stretch;
					justify-content: space-between;
				}
				margin-bottom: 0.5em;
			}
			&-buttons {
				display: flex;
				gap: 0.4em;
				align-items: center;
			}
		}
	}
}